<template>
  <div class="app-container">
    <YxhyTableQuery :query-params.sync="queryParams" :query-columns="queryColumns" @search="handleQuery">
      <el-form-item slot="button">
        <el-button v-hasPermi="['miniProgram:mp:add']" type="success" @click="handleAdd">添加小程序</el-button>
      </el-form-item>
    </YxhyTableQuery>

    <div class="">
      <div class="font-color-2 font-12">开启审核模式后，针对不是邀请或推广来的用户(比如微信审核员)，会屏蔽所有短剧相关内容</div>
      <div class="item-box">
        <div v-for="item in tableList" :key="item.id" class="item-panel">
          <div class="flex ai-center jc-between">
            <p class="font-30">{{ item.product_name }}</p>
            <el-button v-hasPermi="['miniProgram:mp:edit']" type="primary" icon="el-icon-edit" circle @click="handleUpdate(item)" />
          </div>
          <p class="font-14 mt-10">ID：{{ item.id }}</p>
          <p class="font-14 mt-10">AppID：{{ item.appid }}</p>
          <p class="font-14 mt-10">原始ID：{{ item.original_id }}</p>
          <div class="flex mt-10" v-hasPermi="['miniProgram:mp:audit']">
            <p class="font-14">审核模式：</p>
            <el-switch v-model="item.is_audit" @change="handleChange(item)" />
          </div>
        </div>
      </div>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

  </div>
</template>

<script>
import {
  listType
} from '@/api/system/dict/type'
import { queryListMp, updateIsAudit } from '@/api/miniProgram/mp'

export default {
  name: 'MpList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        product_id_search: undefined,
        product_name_search: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        placeholder: '请输入小程序Id',
        type: 'input',
        param: 'product_id_search'
      }, {
        label: '',
        placeholder: '请输入小程序名称',
        type: 'input',
        param: 'product_name_search'
      }]
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const res = await queryListMp({
        ...this.queryPage,
        ...this.queryParams
      })
      res.data.map(e => {
        const { is_audit } = e
        e.is_audit = is_audit == 1
        return e
      })
      this.tableList = res.data
      this.total = res.total
    },
    /** 审核模式开关切换 */
    async handleChange(item) {
      const { is_audit, id } = item
      await updateIsAudit({
        product_id: id,
        is_audit: is_audit ? 1 : 2
      })
      this.$modal.msgSuccess('操作成功')
      await this.init()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({
        path: '/miniProgram/mp/add'
      })
    },
    /** 修改按钮操作 */
    handleUpdate(item) {
      const { id } = item
      this.$router.push({
        path: '/miniProgram/mp/add',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
  .item-panel {
    width: 32%;
    background-color: #f8f8f8;
    padding: 10px;
    margin-bottom: 20px;
  }
}
.item-box:after{
  content: '';
  width: 30%;
}

@media (max-width: 768px) {
  .item-box {
    .item-panel {
      width: 100%;
    }
  }
}
</style>
